.welfare-wrapper {
  width: 100%;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9;

  .top-content-root {
    width: 750px;
    height: 560px;

    .bg-contain {
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      object-fit: fill;
      width: 100%;
      height: 100%;
    }

    .top-content {
      width: 100%;
      height: 100%;
      position: absolute;
      flex-direction: column;
    }
  }

  .basic-info-contain {
    width: 100%;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 80px;

    .welfare-txt {
      font-size: 34px;
      font-weight: bold;
      color: #ffffff;
      line-height: 30px;
      flex-shrink: 0;
    }

    .receive-welfare-content {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-top: 30px;
      padding-bottom: 30px;
      flex: 1;

      .exchange-left {
        position: absolute;
        left: 0px;
      }

      .exchange-right {
        position: absolute;
        right: 0px;
      }

      .exchange {
        flex-direction: column;
        align-items: center;

        .txt1 {
          font-size: 30px;
          font-weight: normal;
          color: #ffffff;
          line-height: 26px;
          margin-bottom: 6px;
        }

        .exchange-content {
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .img1 {
            width: 90px;
            height: 90px;
          }

          .txt2 {
            font-size: 30px;
            font-weight: normal;
            color: #0096f9;
            line-height: 30px;
            position: absolute;
          }
        }
      }

      .click-receive {
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .img2 {
          width: 200px;
          height: 200px;
        }

        .click-txt {
          position: absolute;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .txt {
            font-size: 34px;
            font-weight: normal;
            color: #0096f9;
            line-height: 38px;
          }

          .txt-default {
            font-size: 34px;
            font-weight: normal;
            color: #878787;
            line-height: 38px;
          }
        }
      }
    }
  }
}

.continue-sign-wrapper {
  padding-left: 24px;
  padding-right: 24px;
  margin-top: -80px;

  .continue-sign {
    flex-direction: column;
    width: 100%;
    background-color: #ffffff;
    border-radius: 28px;

    .sign-title {
      margin-top: 24px;
      margin-bottom: 24px;
      margin-left: 20px;

      .txt {
        font-size: 34px;
        font-weight: bold;
        color: #333333;
        line-height: 28px;
      }
    }

    .sign-list-root {
      width: 100%;
      height: 120px;

      .sign-list {
        width: 100%;
        height: 100%;
        flex-direction: row;
        padding-left: 20px;
        padding-right: 0px;

        .sign-list-item-default {
          width: 90px;
          height: 120px;
          border-radius: 16px;
          margin-right: 20px;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: #f0f0f0;

          .score-default {
            width: 60px;
            height: 60px;
            font-size: 26px;
            font-weight: 400;
            color: #878787;
            border-radius: 100px;
            text-align: center;
            line-height: 60px;
            background-color: #e5e5e5;
          }

          .name-default {
            font-size: 26px;
            font-weight: 500;
            color: #878787;
            line-height: 24px;
            margin-top: 8px;
          }
        }

        .sign-list-item-check {
          width: 90px;
          height: 120px;
          border-radius: 16px;
          margin-right: 20px;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: #0096f9;

          .score-check {
            width: 60px;
            height: 60px;
            font-size: 26px;
            font-weight: 400;
            color: #ffffff;
            border-radius: 100px;
            text-align: center;
            line-height: 60px;
            background-color: #61befc;
          }

          .name-check {
            font-size: 26px;
            font-weight: 500;
            color: #ffffff;
            line-height: 24px;
            margin-top: 8px;
          }
        }

        .sign-list-item-last {
          margin-right: 0px;
        }
      }
    }

    .sign-action-default {
      margin-left: 24px;
      margin-right: 24px;
      height: 94px;
      background-color: #0096f9;
      border-radius: 48px;
      margin-top: 30px;
      margin-bottom: 22px;

      .txt {
        font-size: 34px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        line-height: 94px;
        width: 100%;
      }
    }

    .sign-action-check {
      margin-left: 24px;
      margin-right: 24px;
      height: 94px;
      background-color: #F0F0F0;
      border-radius: 48px;
      margin-top: 30px;
      margin-bottom: 22px;

      .txt {
        font-size: 34px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        line-height: 94px;
        width: 100%;
      }
    }

    .sign-hint {
      margin-left: 24px;
      margin-right: 24px;
      margin-bottom: 24px;

      .txt {
        font-size: 28px;
        font-weight: 400;
        color: #0096f9;
        text-align: center;
        line-height: 24px;
        width: 100%;
      }
    }
  }
}

.task-root {
  margin-top: 20px;
  padding-left: 24px;
  padding-right: 24px;
  flex: 1;

  .task-content {
    width: 100%;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 26px;
    flex: 1;

    .title {
      font-size: 34px;
      font-weight: bold;
      color: #33374d;
      margin-top: 24px;
      margin-right: 24px;
      margin-left: 24px;
      margin-bottom: 24px;
    }

    .task-list {
      flex-direction: column;
      flex: 1;

      .task-item {
        width: 100%;
        flex-direction: row;
        align-items: center;
        margin-bottom: 35px;

        .img1 {
          width: 68px;
          height: 68px;
          flex-shrink: 0;
          margin-left: 24px;
          margin-right: 16px;
        }

        .desc-content {
          flex-grow: 1;
          flex-direction: column;
          justify-content: center;
          margin-right: 16px;

          .desc1 {
            font-size: 30px;
            font-weight: bold;
            color: #33374d;
            lines: 1;
            text-overflow: ellipsis;
          }

          .desc2 {
            margin-top: 8px;
            font-size: 25px;
            font-weight: 400;
            color: #666666;
            lines: 1;
            text-overflow: ellipsis;
          }
        }

        .action-default {
          width: 140px;
          height: 60px;
          background-color: #0096f9;
          border-radius: 48px;
          text-align: center;
          line-height: 60px;
          font-size: 30px;
          font-weight: bold;
          color: #ffffff;
          margin-right: 24px;
        }

        .action-check {
          width: 140px;
          height: 60px;
          background-color: #e5e5e5;
          border-radius: 48px;
          text-align: center;
          line-height: 60px;
          font-size: 30px;
          font-weight: bold;
          color: #ffffff;
          margin-right: 24px;
        }
      }

      .banner-bottom {
        padding-bottom: 128px;
      }
    }
  }
}

.boots-group {
  position: absolute;
  width: 100%;
  min-height: 1px;
  flex-direction: column;
}